<template>
  <view class="search-box" :class="{'plain': plain}" @click="handleClick">
    <view class="search-wrap" :style="{'color': textColor}">
      <text class="icon icon-search"></text>
      <text>{{text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    text: String,
    boxShadow: Boolean,
    plain: {
      type: Boolean,
      default: true,
    },
    textColor: {
      type: String,
      default: '#BCBCBC'
    },
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  padding: 16rpx 0;
  background-color: #ffffff;
  
  &.plain {
    background-color: transparent;

    .search-wrap {
      background-color: #ffffff;
    }
  }
  
  &.box-shadow .search-wrap {
    box-shadow: 0px 4rpx 8rpx 0px rgba(238,238,238,0.5);
  }

  .search-wrap {
    margin: 0 32rpx;
    padding: 18rpx 24rpx;
    border-radius: 38rpx;
    background-color: #F7F8FA;
    border-radius: 38rpx;
    font-size: 28rpx;
    .icon-search {
      margin-right: 18rpx;
      width: 36rpx;
      height: 36rpx;
      background-image: url($img-base + 'common/search_1.png');
      vertical-align: bottom;
    }
  }
}
</style>